<template>

	<view class="content">

		<u-modal :show="showDel" title="温馨提示" :content='content' showCancelButton="true" @cancel="showDel=false"
			@confirm="handleDelLabTypeConfirm"></u-modal>
		<u-picker :show="showSelect" :columns="columns" keyName="typeName" @confirm="handleChoose"
			@cancel="handleCancel"></u-picker>
		<u-picker :show="showSelect1" :columns="columns1" keyName="typeName" @confirm="handleChoose1"
			@cancel="handleCancel1"></u-picker>
		<view class="top">
			<view class="top_search">
				<view class="choose">
					<view class="choose-btn"><u-button type="primary" size="mini" text="模式切换" icon="hourglass-half-fill"
							@click="handleOpenChoose1"></u-button></view>

					<view class="choose-btn"><u-button type="primary" size="mini" text="添加类别" icon="plus-circle"
							@click="handleAddType"></u-button></view>

				</view>
				<u-search :showAction="true" v-if="activeIndex==0" placeholder="请输入类别名称" v-model="form.typeName"
					@search="handleSearch(0)" @custom="handleSearch(0)" actionText="搜索" :animation="true"></u-search>

				<u-search :showAction="true" v-if="activeIndex==1" placeholder="请输入类别编号" v-model="form.typeId"
					@search="handleSearch(1)" @custom="handleSearch(1)" actionText="搜索" :animation="true"></u-search>



			</view>
		</view>



		<!-- 滚动列表 -->
		<view class="list">
			<u-empty v-if="typeList.length==0" mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"
				text="暂无数据">
			</u-empty>
			<!-- 			<u-loading-page loading-text="数据加载中" :loading="showLoading">
			
			</u-loading-page> -->
			<view class="type_item" v-for="(item,index) in typeList" :key="item.typeId">
				<!-- 类别名称 -->
				<view class="type_name">类别名称：<text style="font-weight: 400;">{{item.typeName}}</text></view>
				<!-- 类别编号 -->
				<view class="type_id">类别编号：<text style="font-weight: 400;">{{item.typeId}}</text></view>
				<!-- 编辑按钮 -->
				<view class="btn_edit">
					<u-button type="primary" text="编辑" size="mini"
						@click="handleEdit(item.typeId,item.typeName)"></u-button>
				</view>
				<!-- 删除按钮 -->
				<view class="btn_del">
					<u-button type="error" text="删除" size="mini" @click="handleDel(item.typeId)"></u-button>
				</view>
			</view>



		</view>
	</view>
</template>

<script>
	import {
		getLablist,
		getAllLabType,
		deleteLab,
		deleteLabType
	} from '../../api/laboratory.js'
	export default {
		data() {
			return {
				typeform: {},
				activeId: "",
				showDel: false,
				content: "此操作将删除该实验室类别，是否继续？",
				activeIndex: 0,
				columns1: [
					['模糊搜索', "精确搜索"]
				],
				showSelect1: false,
				form: {},
				list: [],
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
				columns: [],
				showSelect: false,
				types: [],
				showLoading: false,
				selectName: "全部",
				typeList: [],
				activeTypeId: ""

			};
		},
		methods: {
			// 确定删除
			handleDelLabTypeConfirm() {
				deleteLabType({
					typeId: this.activeTypeId
				}).then(res => {
					uni.$u.toast("删除成功！")
					// 重新请求数据
					this.hangeGetTypeList()
				}).catch(err => {
					uni.$u.toast("删除失败！")
				})
				this.showDel = false
			},
			// 添加实验室类别
			handleAddType() {
				uni.navigateTo({
					url: "/subpages/admin_labtype_add/admin_labtype_add"
				})
			},
			// 删除类别
			handleDel(typeId) {
				this.activeTypeId = typeId
				this.showDel = true
			},
			// 编辑类别
			handleEdit(typeId, typeName) {
				uni.navigateTo({
					url: `/subpages/admin_labtype_add/admin_labtype_add?typeId=${typeId}&typeName=${typeName}`
				})
			},
			// 条件获取实验室类别
			hangeGetTypeList() {
				getAllLabType(this.form).then(res => {
					let arr = [...res.data]
					arr = arr.reverse()
					this.typeList = [...arr]
					uni.stopPullDownRefresh()
				})
			},

			// 开始模式切换选择器
			handleOpenChoose1() {
				this.showSelect1 = true
			},
			// 模式切换取消按钮点击事件
			handleCancel1() {
				this.showSelect1 = false
			},
			// 模式切换确定按钮点击事件 
			handleChoose1(data) {
				// 一切换模式就清空表单
				this.form = {}
				let index = data.indexs[0]
				this.activeIndex = index
				// console.log(index);
				if (index == 0) {
					this.hangeGetTypeList()
				} else {
					this.typeList = []
				}
				this.showSelect1 = false
			},
			// 每一个实验室的点击事件
			handleItemClick(id) {
				uni.navigateTo({
					url: `/subpages/lab_detail/lab_detail?laboratoryId=${id}`
				})
			},
			// 获取所有实验室类别
			handleGetAllType() {
				getAllLabType().then(result => {
					let arr = []
					arr = [...result.data]
					let obj = {
						typeId: "",
						typeName: "全部"
					}
					arr.unshift(obj)
					this.columns[0] = arr
					this.types = arr
					uni.stopPullDownRefresh();
				})
			},
			// 打开类型选择
			handleOpenChoose() {
				this.showSelect = true
			},
			// 选择器确定按钮点击事件
			handleChoose(data) {
				let index = data.indexs[0]
				// console.log(this.types[index]);
				this.form.typeId = this.types[index].typeId
				this.selectName = this.types[index].typeName
				// 重新请求数据
				this.handleGetLabList()
				this.showSelect = false


			},
			// 关闭选择器
			handleCancel() {
				this.showSelect = false
			},
			// 搜索实验室类别
			handleSearch(type) {
				if (type == 0) {
					this.hangeGetTypeList()
				} else if (type == 1) {
					if (!this.form.typeId || isNaN(this.form.typeId)) {
						uni.$u.toast('请正确输入类别编号')
						return
					} else {
						this.hangeGetTypeList()
					}
				}

			}
		},
		created() {
			this.hangeGetTypeList()
		},
		onPullDownRefresh() {
			this.hangeGetTypeList()
		},
		onShow() {
			this.hangeGetTypeList()
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		min-height: 100vh;
		// overflow: hidden;
		display: inline-block;
		// 

		.top {
			width: 100%;
			height: 180upx;
			overflow: hidden;
			box-shadow: 0 3upx 30upx rgba(0, 0, 0, .15);
			// 

			.top_search {
				position: relative;
				box-sizing: border-box;
				width: 100%;
				padding: 0 20upx;
				margin-top: 30upx;
				display: flex;
				flex-direction: row;
				align-items: center;


				.choose {
					position: absolute;
					top: 44px;
					left: 10px;
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;

					.choose-btn {
						color: #ff0000;
						width: 200upx;
						margin-right: 20upx;

					}
				}
			}
		}



		.list {
			box-sizing: border-box;
			padding: 28upx;
			width: 100%;
			height: 84vh;
			background-color: #fff;
			overflow-y: scroll;

			.type_item {
				position: relative;
				box-sizing: border-box;
				padding: 30upx;
				width: 100%;
				background-color: #fff;
				border-radius: 30upx;
				margin-bottom: 37upx;
				box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.15);
				font-weight: 700;

				.type_name {
					margin-bottom: 20upx;
				}

				.btn_edit {
					position: absolute;
					top: 20upx;
					right: 20upx;
					width: 160upx;
					height: 50upx;
				}

				.btn_del {
					position: absolute;
					bottom: 20upx;
					right: 20upx;
					width: 160upx;
					height: 50upx;
				}
			}

			.list-item {
				position: relative;
				box-sizing: border-box;
				padding: 30upx;
				width: 100%;
				min-height: 270upx;
				background-color: #fff;
				border-radius: 30upx;
				margin-bottom: 37upx;
				box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.15);
				font-weight: 700;

				.item-id {
					position: absolute;
					top: 5px;
					right: 15px;
					font-size: 12px;
					font-weight: 400;
					color: #afafaf;

				}

				.item-top {
					max-width: 60%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;

				}

				.item-center {
					width: 100%;
					height: 145upx;
					// background-color: pink;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.item-content {
						flex: 1;
						margin-right: 20upx;
						background-color: #fff;
						height: 107upx;
						overflow: hidden;
						font-size: 28upx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						/*! autoprefixer: off */
						-webkit-box-orient: vertical;
						// text-indent: 2em;
						font-weight: 400;

					}

					.item-coverPhoto {
						width: 140upx;
						height: 140upx;
						background-color: #fff;
						border-radius: 10upx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 10upx;
						}
					}

					.item_btn {
						box-sizing: border-box;
						padding: 10upx;
						width: 135upx;
						height: 190upx;
						margin-left: 20upx;
						// background-color: pink;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-top: 32upx;

						.detail_btn {
							width: 100%;
							height: 50upx;
						}
					}
				}

				.item-bottom {
					height: 30upx;
					// background-color: pink;
					margin-top: 5upx;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					font-size: 12px;
					font-weight: 400;
					color: #afafaf;

					.contex {
						color: #00b26a;
					}

					.contex1 {
						color: #5064eb;
					}

					.check-type {
						margin-right: 40upx;
					}
				}
			}

		}
	}
</style>